<template>
	<!-- 切换状态 -->
	<up-sticky bgColor="#fff">
		<up-tabs @change="hanldeChange" :inactiveStyle="{color: '#697789'}" :activeStyle="{color: '#0055FE'}"
			lineColor="#0055FE" :list="tabList" :scrollable="false"></up-tabs>
	</up-sticky>
	<view class="list-box pad-30">
		<view v-for="item in couponList" :key="item.id">
			<view v-if="tabIndex == 0" class="list betweenX centerY color-white pad-30 mar-bottom-30">
				<image class="bg" src="/static/image/coupon.png"></image>
				<view class="centerX columnY left">
					<view class="font-40" v-if="item.discount_method == 1">全免</view>
					<view class="font-40" v-if="item.discount_method == 2">{{item.discount_num * 10}}折</view>
					<view class="font-40" v-if="item.discount_method == 3">￥{{item.discount_num}}</view>
					<view class="font-26">满{{item.price_condition}}可用</view>
				</view>
				<view class="betweenX centerY flex-w pad-left-20">
					<view>
						<view class="font-30">{{item.name}}</view>
						<view class="font-26 opacity">{{timeFormat(item.valid_end_at, 'yyyy年mm月dd日')}} 前有效</view>
					</view>
					<!-- <view class="btn">去使用</view> -->
				</view>
			</view>

			<view v-if="tabIndex == 1" class="list2 betweenX centerY color-white pad-30 mar-bottom-30">
				<view class="centerX columnY left">
					<view class="font-40" v-if="item.discount_method == 1">全免</view>
					<view class="font-40" v-if="item.discount_method == 2">{{item.discount_num * 10}}折</view>
					<view class="font-40" v-if="item.discount_method == 3">￥{{item.discount_num}}</view>
					<view class="font-26">满{{item.price_condition}}可用</view>
				</view>
				<view class="betweenX centerY flex-w pad-left-20">
					<view>
						<view class="font-30">{{item.name}}</view>
						<view class="font-26 opacity">2024-12-31前有效</view>
					</view>
					<view>
						<image class="invalid" src="/static/image/invalid.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-empty v-if="couponList.length == 0" marginTop="100" width="75" height="75" text="暂无优惠券"
		icon="/static/image/coupon-none.png"></u-empty>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		timeFormat
	} from '@/uni_modules/uview-plus';
	import {
		getUserCouponAll
	} from '@/api/index.js';
	import {
		onShow
	} from '@dcloudio/uni-app';


	// 创建响应式数据  
	const tabList = reactive([{
			name: '可使用',
			id: '1'
		},
		{
			name: '已过期',
			id: '3'
		}
	]);

	let tabIndex = ref(0);
	let statusVal = ref(1);
	// 切换tabs 
	const hanldeChange = e => {
		tabIndex.value = e.index;
		statusVal.value = e.id;
		if (e.index == 1) {
			hanldeUserCouponAll(e.id);
		} else {
			hanldeUserCouponAll(e.id);
		}
	}

	// 获取优惠券列表
	const couponList = ref([]);
	const hanldeUserCouponAll = () => {
		couponList.value = [];
		getUserCouponAll({
			use_status: statusVal.value
		}).then(res => {
			couponList.value = res.data.lists;
		})
	}

	onShow(() => {
		hanldeUserCouponAll();
	})
</script>

<style scoped lang="scss">
	.list {
		width: 100%;
		height: 180rpx;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
	}

	.list2 {
		width: 100%;
		height: 180rpx;
		position: relative;
		// background: url('/static/image/coupon-no.png') no-repeat center/cover;
	}

	.opacity {
		opacity: .7;
	}

	.btn {
		width: 140rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 50rpx;
		color: #FE5113;
		font-size: 26rpx;
	}

	.left {
		width: 180rpx;
	}

	.invalid {
		width: 139rpx;
		height: 86rpx;
	}
</style>